<template>
	<view class="home-menu-item" @click="toLotter(keyCode,lotName,lotteryId)">
		<view class="h-m-c">
			<view class="h-m-i-img"><image class="h-m-i-img-img" mode="aspectFit" :src="imgSrc"></image></view>
			<view class="h-m-i-text">
				<span class="h-m-i-text-one">{{ lotName }}</span>
				<span class="h-m-i-text-three" :data-time="showTimer">{{ showTimer | countdown }}</span>
			</view>
			<view class="h-m-i-icon"><i class="iconfont">&#xe612;</i></view>
		</view>
	</view>
</template>

<script>
import { Tools, Config, URL, Net, VueTools } from '@/common/tools.js';
export default {
	name: 'HomeMenuItem',
	props: {
		imgSrc: {
			type: String,
			default: ''
		},
		lotName: {
			type: String,
			default: ''
		},
		timer: {
			type: [String, Number],
			default: '已封盘'
		},
		keyCode: {
			type: String,
			default: ''
		},
		lotteryId: {
			type: String,
			default: ''
		}
	},
	data() {
		return {
			showTimer: this.timer,
			timerArr: []
		};
	},
	mounted() {
		let that=this;
		this.OnTimer();
		uni.$on("clearMenuTimer",this.clearTimerArr);
		uni.$on("startTimer",function(){
			that.OnTimer();
		});
	},
	watch: {
		timer: function(val, oldVal) {
			this.showTimer = val;
		}
	},
	methods: {
		OnTimer() {
			let that = this;
			this.timerArr=[];
			let tempTimer = setInterval(function() {
				that.showTimer--;
			}, 1000);
			this.timerArr.push(tempTimer);
		},
		clearTimerArr(){
			for(let item in this.timerArr){
				clearInterval(this.timerArr[item]);
			}
			this.timerArr=[];
		},
		toLotter(keyCode,lotName,lotteryId){
			let that=this;
			uni.navigateTo({
			    url: '/pages/home/lotdetail/lotdetail?code='+keyCode+'&name='+lotName+'&lotteryId='+lotteryId,
				complete: () => {
					that.$store.commit('setTabbarIndex', -1);
				}
			});
		}
	},
	destroyed() {
		this.clearTimerArr();
		uni.$off("clearMenuTimer");
		uni.$off("startTimer");
	},
	filters: {
		countdown: function(value, isHideHour = false) {
			if (Tools.isEmpty(value) || value < 0) {
				return '已封盘';
			} else {
				if (isHideHour == true) {
					return Tools.formateTime(value, true);
				}
				return Tools.formateTime(value);
			}
		}
	}
};
</script>

<style lang="scss">
.h-m-c {
	display: flex;
}
.home-menu-item {
	height: 120rpx;
	padding: 20rpx 0rpx 20rpx 20rpx;
	position: relative;
	.h-m-i-img {
		.h-m-i-img-img {
			width: 120rpx;
			height: 120rpx;
		}
	}
	.h-m-i-text {
		margin-left: 16rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding-bottom: 20rpx;
		.h-m-i-text-one {
			font-weight: 800;
			font-size: 24rpx;
			color: #4f4f4f;
			margin: 10rpx 0rpx;
		}
		.h-m-i-text-three {
			font-size: 24rpx;
			color: #d31111;
		}
	}
	.h-m-i-icon {
		position: absolute;
		right: 20rpx;
		bottom: 20rpx;
	}
}
</style>
